<template>
    <h3>当前位置：{{ TITLE.referral }}</h3>
    <div class="outbox">
        <div :style="{ height, width: leftWidth }" class="list">
            <bListSearch :instance="mSearch">
                <ElButton @click="() => mSearch.onSearch()" type="primary">搜索</ElButton>
            </bListSearch>
            <bTable :label="pList.labels" :table-data="pList.list" :colors="colors" :total="pList.total" :is-h="[]"
                :border="false" :limit="pList.limit" @currentchange="onCurrentchange">
            </bTable>
        </div>
        <div id="box22">
            <h4>累计服务人次</h4>
            <div class="blank"></div>
            <div class="item">上转检查检验:{{ pList.right.examAssem }}人</div>
            <div class="item">上转门诊:{{ pList.right.transferTreatInfo1 }}人</div>
            <div class="item">上转住院:{{ pList.right.transferTreatInfo2 }}人</div>
            <div class="item">上转日间手术室:{{ pList.right.rjssAndRecovery1 }}人</div>
            <div class="item">下转康复:{{ pList.right.rjssAndRecovery2 }}人</div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { EDP } from '@b/model/enum';
import { TITLE } from "@b/model/enum";
import { ref } from 'vue';
import bTable from "@/components/public/b_table.vue";
import bListSearch from "@/components/public/b_list_search.vue";
import { ElButton } from "element-plus";
import { Referral, ReferralSearch } from "@b/index/referral";
import { reactive } from "vue";
const pList = reactive(new Referral())
const mSearch = reactive(new ReferralSearch())
const height = ref(EDP.HEIGHT + 'px')
const leftWidth = ref(EDP.WIDTH * 0.8 + 'px')
const rightWidth = ref(EDP.WIDTH * 0.2 + 'px')
const colors = ['#dfdfdf10', '']

mSearch.onSearch = async () => {
    pList.search_key = mSearch.getData()
    pList.refresh(1);
}
mSearch.onSearch()
pList.getRightData()
const onCurrentchange = (page: number) => {
    pList.refresh(page)
}
</script>
<style scoped>
.outbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#box22 {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    width: v-bind(rightWidth);
    height: v-bind(height);
}

#box22 .item {
    padding: 26px;
    border: 1px solid var(--color-white);
    margin-bottom: 40px;
    width: 16em;
    text-align: center;
}

.list {
    overflow: auto;
}
</style>